import React, {Component} from 'react';
import {Relax} from 'iflux2';
import {Map} from 'immutable';
import moment from 'moment';


import Image from 'components/Image';
import {Row, Col} from 'antd';

import { defaultAvatorImage } from 'constant/image.js'
@Relax
export default class OrderInfo extends Component {
    static defaultProps = {
        order: Map(),
        userLogo: ''
    }


    render() {
        const {order, userLogo} = this.props;

        return (
            <div className="order-info">
                <Row>
                    <Col span={16}>
                        <div>
                            <b className="font-14">订单编号：</b>
                            <span className="t-grayer">{order.get('tid')}</span>
                            <span className="t-grayer pushl">下单时间：{moment(order.get('ctime')).format('YYYY/MM/DD HH:mm:ss')}</span>
                            <b className="font-14 ml30">订单状态：</b>
                            <span className="t-red">待支付</span>
                        </div>
                        <div className="info-items pusht">
                            <Row>
                                <Col span={8}>
                                    <span>需付款：</span>
                                    <span className="t-red">&yen;{order.get('totalTradeCash')}</span>
                                </Col>
                                <Col span={16}>
                                    <span>配送方式：</span>
                                    <span>{order.get('shipMethodName')}</span>
                                </Col>
                                <Col span={8}>
                                    <span>支付方式：</span>
                                    <span>{order.get('payTypeName')}</span>
                                </Col>
                                <Col span={16}>
                                    <span>发票信息：</span>
                                    <span>{order.get('invoiceFlag') == 1 ? '需开发票' : '不开发票'}</span>
                                </Col>
                            </Row>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className="buyer t-right">
                            <div className="avatar">
                                <Image src={userLogo || defaultAvatorImage} auto={true}/>
                            </div>
                            <span className="va-m pushl">买家：{order.get('buyNickName')}</span>
                            <span className="va-m ml30">会员编号：{order.get('buyUsercode')}</span>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }
}